page {
    background: #f5f5f5;
    // overflow: hidden;
    // padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}

.logo {
    @include wh(100%);
    @include flex(center, flex-start);
    padding: 0 24rpx;
    box-sizing: border-box;

    image {
        @include wh(96rpx, 88rpx);
        margin-right: 14rpx;
    }

    .logo-right {
        @include wh(calc(100% - 110rpx));

        .title {
            @include wh(100%);
            @extend %text-overflow;
            @include fonts(32rpx, #222222, bold);
        }

        .text {
            @include wh(100%);
            @extend %text-overflow;
            @include fonts(20rpx, #C9C9C9, bold);
        }
    }
}
.search-layout {
    @include wh(100%, 116rpx);
    @include flex(center, center);
    padding: 0 32rpx;
    box-sizing: border-box;
    position: fixed;
    z-index: 10;
    background: #FFFFFF;

    .search {
        @include wh(100%, 72rpx);
        @include flex(center, flex-start);
        padding: 16rpx 12rpx;
        box-sizing: border-box;
        background: #F9F9F9;

        image {
            @include wh(40rpx, 40rpx);
            margin-right: 16rpx;
        }

        .search-text {
            @include wh(calc(100% - 10%));
            @include fonts(28rpx, #939395, 400);
            @extend %text-overflow;
        }
    }
}
.top-padding{
    @include wh(100%, 116rpx);
}
.container-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .card-layout {
        @include wh(100%);
        background: #FFFFFF;
        padding: 24rpx 32rpx 24rpx 32rpx;
        box-sizing: border-box;

        .swiper {
            @include wh(100%, 360rpx);

            .swiper-img {
                @include wh(100%, 360rpx);
                border-radius: 8rpx;
            }
        }

        .swiper .wx-swiper-dot {
            @include wh(16rpx, 8rpx);
            border-radius: 8rpx;
            background: rgba(255, 255, 255, 0.3);
        }

        .swiper .wx-swiper-dot-active {
            @include wh(28rpx, 8rpx);
            border-radius: 8rpx;
            background: rgba(255, 255, 255, 0.5);
        }

        .card-item-layout {
            @include wh(686rpx);
            @include flex(center, space-between);
            padding: 24rpx 0;
            box-sizing: border-box;

            .card-item {
                @include wh(330rpx, 330rpx);
                background: #F5F5F5;
                border-radius: 8rpx;
                position: relative;

                .card-item-content {
                    padding: 32rpx;
                    box-sizing: border-box;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;

                    .title {
                        @include fonts(30rpx, #222222, bold);
                        margin-bottom: 8rpx;
                    }

                    .text {
                        @include fonts(24rpx, #967E4F, 400);
                    }

                    .label {
                        @include wh(96rpx, 36rpx);
                        @include flex(center, center);
                        @include fonts(20rpx, #FFFFFF, bold);
                        box-sizing: border-box;
                        background: rgba(34, 34, 34, 0.5);
                        border-radius: 0rpx 18rpx 18rpx 18rpx;
                        margin-top: 10rpx;
                    }

                    .img-layout {
                        @include wh(330rpx);
                        @include flex(center, center);
                        margin-left: -32rpx;
                        image {
                            @include wh(100%, 172rpx);
                        }
                    }

                }

                .card-item-bg {
                    @include wh(172rpx, 172rpx);
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 1;
                }
            }

            .card-item-right {
                @include wh(330rpx, 330rpx);
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: space-between;

                .card-item2{
                    @include wh(330rpx,148rpx);
                    background: #F5F5F5;
                    position: relative;
                    border-radius: 8rpx;
                    .card-item-content {
                        padding: 32rpx;
                        box-sizing: border-box;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 5;

                        .title {
                            @include flex(center,flex-start);
                            @include fonts(30rpx, #222222, bold);
                            margin-bottom: 8rpx;

                            .label {
                                @include wh(96rpx, 36rpx);
                                @include flex(center, center);
                                @include fonts(20rpx, #FFFFFF, bold);
                                box-sizing: border-box;
                                background: rgba(34, 34, 34, 0.5);
                                border-radius: 0rpx 18rpx 18rpx 18rpx;
                                margin-left: 8rpx;
                            }
                        }

                        .text {
                            @include fonts(24rpx, #967E4F, 400);
                        }

                    }

                    .img-layout {
                        @include wh(148rpx, 148rpx);
                        @include flex(center, center);
                        position: absolute;
                        right: 0;
                        top: 0;
                        z-index: 1;
                        image {
                            @include wh(148rpx, 148rpx);
                        }
                    }
                }
            }
        }

        .adverts-layout{
            @include wh(686rpx,128rpx);
            @include flex(center,space-between);
            background-image: url('https://security-base.oss-cn-chengdu.aliyuncs.com/2023-09-11/a4261c303d3c79233c1fc92276f4f030.png');
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            padding: 0 20rpx 0 12rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            .left{
                @include flex(center,flex-start);
                .title{
                    @include fonts(40rpx,#FFFFFF,bold);
                    font-family: AlimamaShuHeiTiBold;
                }
                .label{
                    @include wh(58rpx,40rpx);
                    @include flex(center,center);
                    @include fonts(28rpx,#E55E5E,bold);
                    box-sizing: border-box;
                    background: #FFFFFF;
                    border-radius: 25rpx;
                    margin-left: 16rpx;
                }
            }
            .right{
                @include flex(center,flex-end);
                @include fonts(30rpx,#EF4F4F,bold);
                image{
                    @include wh(32rpx,32rpx);
                    margin-left: 8rpx;
                }
            }
        }
    }


    .list-layout {
        @include wh(720rpx);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        margin-top: 10rpx;
        // border: 1rpx solid red;

        .list-card-new{
            @include wh(calc((100% - 10rpx) / 2),620rpx);
            background: linear-gradient(159deg, #C9C9C9 0%, #FFFFFF 100%);
            margin-bottom: 10rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60rpx;
            box-sizing: border-box;
            .top{
                @include flex(center,center);
                @include fonts(32rpx,#222222,bold);
                .label{
                    padding: 4rpx 8rpx;
                    box-sizing: border-box;
                    margin-right: 4rpx;
                }
            }
            .text{
                @include fonts(28rpx,#F9F9F9,400);
                margin-top: 10rpx;
            }

            .showcase-layout{
                @include wh(100%,438rpx);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                padding: 0 12rpx 50rpx 28rpx;
                box-sizing: border-box;

                .showcase{
                    @include wh(320rpx,164rpx);
                    background-image: url('../../static/img/showcase.png');
                    /* 背景图不平铺 */
                    background-repeat: no-repeat;
                    /* 让背景图基于容器大小伸缩 */
                    background-size: cover;
                    padding: 60rpx 96rpx 42rpx 24rpx;
                    box-sizing: border-box;
                    position: relative;


                    .showcase-goods-img{
                        @include wh(100%);
                        @include flex(flex-end,center);
                        position: absolute;
                        top: -180rpx;
                        left:0;
                        image{
                            @include wh(200rpx,200rpx)
                        }
                    }

                    .showcase-text{
                        @include fonts(22rpx,#848689,400);
                        @extend %text-overflow;
                    }
                    .money {
                        @include flex(flex-end, flex-start);
                        margin-top: 6rpx;
                        margin-left: 24rpx;
                        .price {
                            @include fonts(22rpx, #222222, bold,'AlimamaShuHeiTiBold');
                        }

                        .originalPrice {
                            @include fonts(20rpx, #848689, 400);
                            text-decoration: line-through;
                            margin-left: 12rpx;
                        }
                    }
                }
            }
        }

        .list-card {
            @include wh(calc((100% - 10rpx) / 2),620rpx);
            background: #ffffff;
            margin-bottom: 10rpx;

            .goodsImg {
                @include wh(100%, 360rpx);
                @include flex(center, center);

                image {
                    @include wh(272rpx, 272rpx);
                }
            }

            .text-content {
                padding: 12rpx 24rpx 40rpx 12rpx;
                box-sizing: border-box;

                .title {
                    @include fonts(28rpx, #222222, bold);
                    margin-bottom: 24rpx;
                    @extend %text-overflow;
                }

                .content {
                    @include fonts(24rpx, #939395, 400);
                    @include text-overflow-many(2);
                    margin-bottom: 16rpx;
                }

                .money {
                    @include flex(flex-end, flex-start);

                    .price {
                        @include fonts(32rpx, #222222, bold,'AlimamaShuHeiTiBold');
                    }

                    .originalPrice {
                        @include fonts(24rpx, #939395, 400);
                        text-decoration: line-through;
                        margin-left: 12rpx;
                    }
                }
            }
        }
    }

}
